<template>
	<view class="layout bg">
		<uv-sticky class="header" custom-nav-height="0" bgColor="#fff">
			<custom-status-bar></custom-status-bar>
			<uv-tabs :current="1" :list="tabs" lineColor="#57bdf2" :scrollable="false"
				@click="handleTabItemClick"></uv-tabs>
		</uv-sticky>
		<view class="content">
			<!-- 推荐页 -->
			<uv-waterfall ref="waterfall" v-model="data" :add-time="10" :left-gap="10" :right-gap="10" :column-gap="10"
				@changeList="changeList">
				<!-- 第一列数据 -->
				<template v-slot:list1>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<card-item class="item" v-for="(item) in firstColumn" :item="item" :key="item.id"></card-item>
					</view>
				</template>
				<!-- 第二列数据 -->
				<template v-slot:list2>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<card-item class="item" v-for="(item) in secondColumn" :item="item" :key="item.id"></card-item>
					</view>
				</template>
			</uv-waterfall>
			<!-- 关注页 -->
			<!-- 附近的人 -->
		</view>
		<uni-load-more :status="isMore"></uni-load-more>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		apiGetBlogRecommend
	} from "@/urls/home/index.js";
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app"
	import {
		guid
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import {
		setToken
	} from '../../utils/AuthUtils';

	const data = ref([]);
	const pageNum = ref(1);
	const pageSize = ref(10);
	const total = ref(0);
	const fetchData = () => {
		apiGetBlogRecommend(pageNum.value, pageSize.value)
			.then((result) => {
				total.value = result.data.total;
				pageNum.value = result.data.pageNum;
				pageSize.value = result.data.pageSize;
				data.value = [...data.value, ...result.data.records];
			})
			.catch((err) => {


			}).finally(() => {
				uni.stopPullDownRefresh();
			})
	}

	onLoad((e) => {
		fetchData();
	})

	onReachBottom(() => {
		const currentTotal = pageNum.value * pageSize.value;
		if (currentTotal < total.value) {
			pageNum.value += 1;
			fetchData();
		}
	})
	const isMore = computed(() => {
		const currentTotal = pageNum.value * pageSize.value;
		if (currentTotal < total.value) {
			return "loading";
		}
		return "no-more";
	})

	const tabs = [{
		name: '关注',
	}, {
		name: '推荐',
	}, {
		name: '附近'
	}];

	const handleTabItemClick = (item) => {
		console.log(item.name);
	}

	const waterfall = ref();
	const firstColumn = ref([])
	const secondColumn = ref([])
	const changeList = (e) => {
		switch (e.name) {
			case "list1":
				firstColumn.value.push(e.value);
				break;
			case "list2":
				secondColumn.value.push(e.value);
				break;
		}
	}

	onPullDownRefresh(() => {
		firstColumn.value= [];
		secondColumn.value= [];
		data.value = [];
		pageNum.value = 1;
		fetchData();
	})
</script>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		}
	}
</script>

<style lang="scss" scoped>
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

	::v-deep .uv-tabs {
		padding: 0 150rpx;

	}

	.layout {
		.header {}
	}
</style>